/*
 * @Author: your name
 * @Date: 2022-03-30 19:34:19
 * @LastEditTime: 2022-04-07 10:55:25
 * @LastEditors: chenyuanming
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp_background_system\src\views\contract\AddContract.jsx
 */
import React, { useState, useRef } from 'react';
import Mypagination from '../../components/myPagination/MyPagination';
import './list.css'
import Contractmodify from '../../components/contractModify/ContractModify';
import {
    CaretDownOutlined, CaretUpOutlined,
    PlusSquareOutlined,
    CheckOutlined,
    QuestionCircleOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import { Button, Input, Space, Form, Row, Col, DatePicker, Select, Collapse, Table, Modal } from 'antd';
const { Option } = Select;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
export default function AddContract() {
    const [form] = Form.useForm();
    const [isAddContractModalVisible, setisAddContractModalVisible] = useState(false)
    const goodsFirstCategory = ['体育', '电子']
    const goodsSecondCategory = {
        '体育': ['足球', '篮球', '乒乓球'],
        '电子': ['手机', '平板', '电脑']
    }
    // 控制增加合同分类的显示隐藏
    // const [isAddContractCategoryModalVisible, setisAddContractCategoryModalVisible] = useState(false);
    // 单击表格行后当前选择的客户信息
    const [customerData, setcustomerData] = useState({});
    const [lastTime, setlastTime] = useState('');
    const [recordTime, setrecordTime] = useState('');
    const [arrowstatus, setarrowstatus] = useState('none');
    const [secondGoods, setsecondGoods] = useState([]);
    const formRef = useRef()
    // 高级搜索
    const highLevelSearch = () => {

        if (formRef.current.style.display === 'block') {
            formRef.current.style.display = 'none'
            setarrowstatus('none')
        } else {
            formRef.current.style.display = 'block'
            setarrowstatus('block')
        }
    }
    //表格行点击事件
    const tableRowClick = (record) => {
        console.log(record);
        setcustomerData(record)
        showAddContractModal(true)
        //生成合同编号，先简单拿到时间，以时间为编号
        // var now = new Date();
        // console.log(now.toLocaleDateString(),now.getHours(),now.getMinutes(),now.getSeconds());
        // let contractTemp = now.toLocaleDateString().replace(/\//g, '')
        //订单编号生成
        // let contract = contractTemp + now.getHours() + now.getMinutes() + now.getSeconds()

    }
    // 表格列数据
    const columns = [
        {
            align: "center",
            title: '客户名称',
            width: 120,
            dataIndex: 'customerName',
            key: 'customerName',

        },
        {
            title: '客户类型',
            width: 150,
            dataIndex: 'customerCategory',
            key: 'customerCategory',

        },
        { title: '联系人', width: 110, dataIndex: 'contact', key: 'contact' },
        { title: '手机号码', width: 120, dataIndex: 'customerPhone', key: 'customerPhone' },
        { title: 'QQ', width: 120, dataIndex: 'customerQQ', key: 'customerQQ' },
        { title: '电子邮箱', width: 120, dataIndex: 'Email', key: 'Email' },
        { title: '单位性质', width: 120, dataIndex: 'companyQuality', key: 'companyQuality' },
        { title: '所属行业', width: 110, dataIndex: 'industry', key: 'industry' },
        { title: '录入时间', width: 120, dataIndex: 'recordDate', key: 'recordDate' },
        { title: '最后更新', width: 120, dataIndex: 'lastEdit', key: 'lastEdit' },

        { title: '总金额', width: 100, dataIndex: 'total', key: 'total' },

        { title: '业务员', width: 70, dataIndex: 'salesman', key: '13' },

    ];
    const otherOptions = [
        {
            key: 1,
            title: '有跟单',
            isChecked: false
        },
        {
            key: 2,
            title: '有订单',
            isChecked: false
        },
        {
            key: 3,
            title: '有合同',
            isChecked: false
        },
        {
            key: 4,
            title: '有售后',
            isChecked: false
        },
        {
            key: 5,
            title: '有附件',
            isChecked: false
        }
    ]
    //合同分类的表格数据
    const deleteCategoryClick = (record) => {
        console.log(record);
    }
    const categoryColumns = [
        {
            title: '类型',
            dataIndex: 'contractType',
            key: 'contractType',
        },
        {
            title: '操作',
            key: 'operation',
            render: (text, record) => {
                return (
                    <DeleteOutlined style={{ color: 'red', cursor: 'pointer' }} onClick={() => {
                        deleteCategoryClick(record)
                    }} />
                )

            }
        }
    ];
    const categoryDatasource = [
        {
            key: 1,
            contractType: '租赁'
        }
    ]
    const [otherOptionsState, setotherOptionsState] = useState(otherOptions);

    //商品类别选项点击
    const handlegoodsFirstChange = value => {
        console.log(value);
        setTimeout(() => {
            setsecondGoods([...goodsSecondCategory[value]])
            console.log(secondGoods);
        });
    };
    const industryOptions = [
        {
            title: '农、林、牧、渔业'
        }, {
            title: '采矿业'
        }, {
            title: '制造业'
        }, {
            title: '电力，燃气及水的生产的供应业'
        }, {
            title: '建筑业'
        }, {
            title: '交通运输'
        },
    ]
    const onsecondGoodsChange = value => {
        console.log(value);
    };
    const data = [
        {
            key: '1',
            customerName: 'John Brown',
            constractNum: 123245678932,
            orderNum: 1234565432,
            dateStart: '2022-01-21',
            dateEnd: '2022-01-27',
            constractCategory: '委托',
            total: '100',
            collected: '100',
            arears: '0',
            isBill: '否',
            isTax: '否',
            reviewer: '超级管理员',
            checkTime: '2022-5-6',
            remark: '',
            salesman: '超级管理员',
            recordDate: '',
            appendix: ''

        },
        {
            key: '2',
            customerName: 'John Brown',
            constractNum: 123245678932,
            orderNum: 1234565432,
            dateStart: '2022-01-21',
            dateEnd: '2022-01-27',
            constractCategory: '委托',
            total: '100',
            collected: '100',
            arears: '0',
            isBill: '否',
            isTax: '否',
            reviewer: '超级管理员',
            checkTime: '2022-5-6',
            remark: '',
            salesman: '超级管理员',
            recordDate: '',
            appendix: ''

        },
    ];

    // 其他勾选项
    const otherOptionsClick = (item) => {
        let temp = otherOptionsState.filter(data => {
            return data.key === item.key
        })
        temp[0].isChecked = !temp[0].isChecked
        let temp2 = otherOptionsState
        for (let index = 0; index < temp2.length; index++) {
            if (temp[0].key === temp2[index].key) {

                temp2[index] = temp[0]

            }

        }
        setotherOptionsState([...temp2])
    }

    //拿到表单数据
    const formValue = () => {
        let a = form.getFieldsValue(true)
        // console.log(a,secondGoods,goodsFirst);
        let tempOptions = []
        otherOptionsState.forEach(item => {
            if (item.isChecked === true) {
                tempOptions.push(item.title)
            }

        })
        console.log(a, lastTime, recordTime, tempOptions);

    }
    // 重置表单数据
    const onReset = () => {
        form.resetFields();
        let temp = otherOptionsState.map(item => {
            item.isChecked = false
            return item
        })

        setotherOptionsState([...temp])
    };
    // modal框事件
    const showAddContractModal = (flag) => {
        console.log(flag);
        setisAddContractModalVisible(flag);
    };
    // const showAddContractCategory = () => {
    //     setisAddContractCategoryModalVisible(true)
    // }

    // const handleAddContractCategoryOk = () => {
    //     setisAddContractCategoryModalVisible(false)

    // }
    // const handleAddContractCategoryCancel = () => {
    //     setisAddContractCategoryModalVisible(false)

    // }

    // const handleOk = (childrenValue) => {
    //     console.log(childrenValue);
    //     setisAddContractModalVisible(childrenValue);
    // };
    // const handleCancel = (childrenValue) => {
    //     console.log(childrenValue);
    //     setisAddContractModalVisible(childrenValue);
    //     console.log(isAddContractModalVisible);
    // };
    return (
        <div className="theadSty">
            <div style={{ display: 'flex' }} >
                <div>
                    <Input size='small' style={{ width: '250px', marginLeft: '10px' }} placeholder="客户名称，手机号码，合同编号" />
                    <Button size='small' style={{ borderRadius: '5px', marginLeft: '5px', border: 'none', backgroundColor: 'rgb(72, 141, 201' }} type="primary"
                    >搜索</Button>
                </div>
                <Button onClick={() => {
                    highLevelSearch()
                }} size='small' style={{ border: 'none', borderRadius: '5px', background: '#cc2626', color: '#fff', marginLeft: '10px' }} type="primary">高级搜索{
                        arrowstatus === 'block' ? <CaretUpOutlined /> : <CaretDownOutlined />
                    }</Button>
                <div style={{ marginLeft: '50px', color: '#ff2f2d' }}>
            
                </div>
            </div>
            {/* //表单 */}
            <div ref={formRef} style={{ marginTop: "10px", display: 'block' }}>
                <Collapse defaultActiveKey={['1']}>
                    <div style={{ marginTop: '10px' }}>
                        <div>
                            <Form
                                form={form}
                                name="basic"
                                labelCol={{ span: 8 }}
                                wrapperCol={{ span: 16 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                            >
                                <Row gutter={10}>
                                    <Col span={8}>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="编号" name="num">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="职位" name="position">
                                            <Select
                                                size='small'
                                                style={{ width: 120, margin: '0 8px' }}
                                            >
                                                <Option value="boss">老板</Option>
                                                <Option value="chairman">董事长</Option>
                                                <Option value="manager">总经理</Option>
                                                <Option value="salesman">业务员</Option>
                                                <Option value="technologyman">技术员</Option>
                                                <Option value="unknownPosition">未知</Option>
                                                <Option value="chargeman">负责人</Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '1px' }} label="网址" name="website">
                                            <Input size='small' />

                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '1px' }} label="最后更新" name="lastUpdate">
                                            <Space direction="vertical" size={12}>
                                                <RangePicker size='small' onChange={(a, b) => {
                                                    console.log(a, b);
                                                    setlastTime([...b])
                                                }} />
                                            </Space>
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="详细地址" name="address">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="客户类型" name="customerType">
                                            <Select
                                                size='small'
                                                style={{ width: 120, margin: '0 8px' }}
                                            >
                                                <Option value="getMoney">已成交</Option>
                                                <Option value="waitMoney">等待打款</Option>
                                                <Option value="getDetails">确定细节</Option>
                                                <Option value="intention">有意向</Option>
                                                <Option value="potential">潜在客户</Option>
                                                <Option value="middleMan">中间商</Option>

                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '1px' }} label="商品类别">
                                            <Select size='small' style={{ width: 120 }} onChange={(v) => handlegoodsFirstChange(v)} >
                                                {goodsFirstCategory.map(goods => (
                                                    <Option key={goods}>{goods}</Option>
                                                ))}
                                            </Select>
                                            <Select size='small' style={{ width: 120 }} onChange={onsecondGoodsChange}>
                                                {secondGoods.map(goods => (
                                                    <Option key={goods}>{goods}</Option>
                                                ))}
                                            </Select>

                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="业务员" name="salesman">
                                            <Select
                                                size='small'
                                                style={{ width: 120, margin: '0 8px' }}
                                            >
                                                <Option value="unAudit">超级管理员</Option>

                                            </Select>
                                        </Form.Item>


                                    </Col>
                                    <Col span={8}>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="客户名称" name="constractName">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="手机号码" name="constractPhone">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="所属行业" name="industry">
                                            <Select
                                                size='small'
                                                style={{ margin: '0 8px' }}
                                            >
                                                {
                                                    industryOptions.map(item => {
                                                        return <Option key={item.title}>{item.title}</Option>
                                                    })
                                                }

                                            </Select>
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="邮编" name="zipCode">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="客户级别" name="customerLevel">
                                            <Select
                                                size='small'
                                                style={{ margin: '0 8px' }}
                                            >
                                                <Option value="onestar">一星</Option>
                                                <Option value="twostar">两星</Option>
                                                <Option value="threestar">三星</Option>
                                                <Option value="fourstar">四星</Option>
                                                <Option value="fivetar">五星</Option>

                                            </Select>
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="部门" name="department">
                                            <Select
                                                size='small'
                                                style={{ margin: '0 8px' }}
                                            >
                                                <Option value="onestar">总经办</Option>
                                                <Option value="twostar">采购部</Option>
                                                <Option value="threestar">营销部</Option>
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="联系人" name="contact">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="电子邮箱" name="email">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item size='small' style={{ marginBottom: '1px' }} label="录入时间" name="recordTime">
                                            <Space direction="vertical" size={12}>
                                                <RangePicker size='small' onChange={(a, b) => {
                                                    console.log(a, b);
                                                    setrecordTime([...b])
                                                }} />
                                            </Space>
                                        </Form.Item>

                                        <Form.Item style={{ marginBottom: '1px' }} label="QQ" name="renewalStatus">

                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '1px' }} label="客户来源" name="customerSource">
                                            <Select
                                                size='small'

                                            >
                                                <Option value="telemarketing">电话营销</Option>
                                                <Option value="searchEngine">搜索引擎</Option>
                                                <Option value="friendIntroduce">朋友介绍</Option>
                                                <Option value="otherSource">其他来源</Option>

                                            </Select>

                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '1px' }} label="录入者" name="recoder">
                                            <Select
                                                size='small'

                                            >
                                                <Option value="stuff1">超级管理员</Option>
                                            </Select>

                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>

                            <div style={{ display: 'flex', marginLeft: '7%' }}>
                                <div>其他：</div>
                                {
                                    otherOptionsState.map((item) => {
                                        return <div key={item.title} className={item.isChecked === true ? 'activeOtherOptions' : 'AddListOther'} onClick={() => {

                                            otherOptionsClick(item)

                                        }}>
                                            <div style={{ marginTop: '2px', marginLeft: '5px', width: '70%' }}>
                                                {item.title}
                                            </div>
                                            <div style={{ fontSize: '20px', width: '30%', backgroundColor: '#fff' }}>
                                                <CheckOutlined className={item.isChecked === true ? 'AddContractActiveIconColor' : 'AddContracticonColor'} />
                                            </div>
                                        </div>
                                    })
                                }
                            </div>

                        </div>
                    </div>

                    {/* </Panel>   */}
                    <div style={{ marginTop: "10px", marginLeft: '40%' }}>
                        <Button className='employeesList_fold_btn1' onClick={
                            () => {
                                formValue()
                            }
                        }>立即搜索</Button>
                        <Button className='employeesList_fold_btn2' onClick={() => {
                            onReset()
                        }}>清空条件</Button>

                    </div>
                </Collapse>

            </div >
            <div style={{ marginTop: '20px' }}>
                <div style={{ backgroundColor: '#e7e7e7', padding: '5px' }}>
                    <Table onRow={record => {
                        //  tableRowClick(record) 
                        return {
                            onClick: event => {
                                tableRowClick(record)
                            },
                            onMouseEnter: event => {

                                event.target.style.cursor = 'pointer'
                            },
                        }

                    }} pagination={false} size='small' columns={columns} dataSource={data} scroll={{ x: 2300 }}

                    />
                </div>
                <Mypagination />
            </div>

            {/* modal框 */}

            <Contractmodify typeId={0} title="新增合同" title2="新增合同信息" showAddContractModal={showAddContractModal} customerData={customerData} isAddContractModalVisible={isAddContractModalVisible} />
        </div >
    )
}
